<template>
  <div class="shadowText" :data-text="text">
    {{ text }}
  </div>
</template>

<script setup>

const props = defineProps(["text"]);
const {text} = toRefs(props);
</script>

<style scoped lang="scss">
.shadowText {
  font-size: 50px;
  font-weight: bold;
  position: relative;
  &::before {
    content: attr(data-text);
    position: absolute;
    transform: translate(-0.4em, 0.2em) scaleY(0.5) skew(50deg);
    -webkit-mask-image: linear-gradient(transparent, #000);
  }
}

</style>
